<template>
  <div>
    <el-form v-if="dialogShow" ref="form" :model="createCourseForm" :rules="createCourseFormRules" label-width="150px">
      <div class="majoryFrom">
        <div>
          <el-form-item label="课程名称" prop="lession_name">
            <el-input v-model="createCourseForm.lession_name" />
          </el-form-item>
          <el-form-item label="课程类型" prop="lession_type">
            <el-select v-model="createCourseForm.lession_type" placeholder="请选择课程类型">
              <el-option label="线上课程" value="1" />
              <el-option label="线下课程" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="选用课程教材" prop="textbook_id">
            <el-select v-model="createCourseForm.textbook_id" placeholder="请选择教材">
              <el-option v-for="item in textbookList" :key="item.unid" :label="item.textbook_name" :value="item.unid" />
            </el-select>
          </el-form-item>
          <el-form-item label="使用年级" prop="grade">
            <el-select v-model="createCourseForm.grade" placeholder="请选择年级">
              <el-option v-for="(item,index) in grade" :key="index" :label="item" :value="index+1" />
            </el-select>
          </el-form-item>
          <el-form-item label="课时" prop="lession_time"><el-input v-model="createCourseForm.lession_time" /></el-form-item>
          <el-form-item label="是否自定义课时" prop="is_custom">
            <el-switch v-model="createCourseForm.is_custom" label :active-value="1" :inactive-value="2" active-color="#409eff" />
          </el-form-item>
          <el-form-item label="是否免费" prop="is_free">
            <el-switch v-model="createCourseForm.is_free" label :active-value="1" :inactive-value="2" active-color="#409eff" />
          </el-form-item>
        </div>
        <div class="kechengjianjie">
          <el-form-item label="任课老师" prop="teacher_name">
            <el-select v-model="createCourseForm.teacher_name" @change="selectSubjectItem">
              <el-option v-for="(item, i) in teacherShuzu" :key="i" :value="item.nickname" :label="item.nickname" />
            </el-select>
          </el-form-item>
          <el-form-item label="课程简介" prop="lession_desc"><el-input v-model="createCourseForm.lession_desc" type="textarea" /></el-form-item>
          <el-form-item label="课程图片" prop="lession_photo">
            <!-- <span v-for="item in createCourseForm.lession_photo" :key="item">
              <el-popover placement="left" title="" trigger="hover" width="600">
                <img :src="item" width="100%">
                <img slot="reference" :src="item" :alt="item" style="height: 150px;width: 150px; padding: 3px">
              </el-popover>
            </span> -->
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" :multiple="true" :file-list="fileList">
              <i slot="default" class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" :append-to-body="true"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog>
          </el-form-item>
        </div>
      </div></el-form>
    <span slot="footer" class="dialog-footer">
      <template v-for="val in footerStatus">
        <el-button v-if="val == 'close'" :key="val" @click="handle(val)">关闭</el-button>
        <el-button v-if="val == 'reset'" :key="val" @click="resetForm('form')">重置</el-button>
        <el-button v-if="val == 'submit'" :key="val" type="primary" @click="createNewCourse">确 定</el-button>
      </template>

    </span>
  </div>
</template>

<script>
import {
    addCourse,
    getTeacherAPI,
    searchJiaocaiID
} from '@/api/kecheng.js'
// import { uploadfile } from '@/utils/uploadFile.js'
// import {
//     getTempKey
// } from '/src/api/upload.js'
export default {
    props: {
        content: {
            type: Object,
            default() {
                return {}
            }
        },
        dialogShow: {
            type: Boolean,
            default() {
                return false
            }
        },
        footerStatus: {
            type: Array,
            default() {
                return ['close', 'reset', 'submit']
            }
        },
        editID: {
            type: String,
            default() {
                return ''
            }
        }
    },
    data() {
        return {
            teacherData: '',
            fileList: [],
            createCourseFormRules: {
                lession_name: [
                    {
                        required: true,
                        message: '请输入课程名字',
                        trigger: 'blur'
                    }
                ],
                lession_photo: [
                    {
                        required: false,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                lession_desc: [
                    {
                        required: false,
                        message: '请输入',
                        trigger: 'blur'
                    }
                ],
                teacher_id: [
                    {
                        required: true,
                        message: '请输入主跟进人ID',
                        trigger: 'blur'
                    },
                    {
                        type: 'number',
                        message: '只能输入数字',
                        trigger: 'blur'
                    }
                ],
                lession_type: [
                    {
                        required: true,
                        message: '请输入课程类型',
                        trigger: 'blur'
                    }
                ],
                textbook_id: [
                    {
                        required: true,
                        message: '请选择教材',
                        trigger: 'blur'
                    }
                ],
                lession_time: [
                    {
                        required: true,
                        message: '请输入课时',
                        trigger: 'blur'
                    }
                ],
                is_custom: [
                    {
                        required: true,
                        message: '请输入课程类型',
                        trigger: 'blur'
                    }
                ],
                grade: [
                    {
                        required: true,
                        message: '请输入使用年级',
                        trigger: 'blur'
                    }
                ],
                teacher_name: [
                    {
                        required: true,
                        message: '请输入任课老师',
                        trigger: 'blur'
                    }
                ],
                is_free: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            createCourseForm: {
                lession_name: '',
                lession_type: null,
                textbook_id: null,
                is_custom: null,
                lession_time: null,
                grade: null,
                is_free: null,
                teacher_id: null,
                teacher_name: '',
                lession_desc: '',
                lession_photo: ''
            },
            teacherShuzu: [],
            textbookList: [],
            dialogVisible: false, // 图片显示的对话框
            dialogImageUrl: '',
            disabled: false,
            grade: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三']

        }
    },
    watch: {
        // 获取主页面传递数据
        content(newVal) {
            this.createCourseForm = newVal
            this.$forceUpdate()
        }
    },
    created() {
        this.createCourseForm = this.content
        this.getTeacher()
        this.getTextbookList()
    },
    methods: {
        // 获取选择器选中对象的两个属性值
        selectSubjectItem() {
            const item = this.teacherShuzu.find(item1 => item1.nickname === this.createCourseForm.teacher_name)
            this.createCourseForm.teacher_id = item.id
            this.createCourseForm.teacher_name = item.nickname
        },
        // 关闭操作
        handle(buttonType) {
            this.$emit('handle', buttonType)
        },
        // 获取教师
        async getTeacher() {
            let qqq = {}
            const rs = await getTeacherAPI(qqq)
            this.teacherShuzu = rs.data
        },
        // 获取教材
        async getTextbookList() {
            let queryInfo = {}
            var textbookData = await searchJiaocaiID(queryInfo)
            if (textbookData.code !== 200) return
            this.textbookList = textbookData.data.list
        },
        // 图片删除
        handleRemove(file, fileList) {
            this.fileList = fileList
            this.$message({
                type: 'info',
                message: '已删除原有图片',
                duration: 1000
            })
        },
        // 图片放大
        handlePreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        // 图片上传
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        // handleChange(event) {
        //     console.log(event, 'pppppppppppppppppppp')
        //     uploadfile(event.target.files).then(res => {
        //         setTimeout(function() {
        // console.log(res)
        // _this.tabCont.imageUrl = res[0];
        // _this.$forceUpdate();
        //         }, 500)
        //     })
        // },

        // 图片删除
        // handleRemove(file) {
        //     console.log(file.url)
        //     // this.createCourseForm.lession_photo.splice(file.uid, 1)
        //     // this.dialogImageUrl = ''
        //     // this.createCourseForm.lession_photo = ''
        //     this.$forceUpdate()
        // },
        // // 图片处理（上传&&放大）
        // handlePictureCardPreview(file) {
        //     // this.dialogImageUrl = file.url
        //     this.createCourseForm.lession_photo = file.url
        //     this.dialogVisible = true
        // },
        // 图片下载
        // handleDownload(file) {
        //     var a = document.createElement('a')
        //     var event = new MouseEvent('click')
        //     a.download = file.name
        //     a.href = file.url
        //     a.dispatchEvent(event)
        // },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields()
            // this.createCourseForm.lession_photo = this.tabContImage;
            this.$forceUpdate()
        },
        // 增加课程&&表单提交
        createNewCourse() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    var lession_photo = this.fileList.map(item => {
                        return item.url
                    })
                    this.createCourseForm['lession_photo'] = lession_photo[0]
                    if (this.editID != '') {
                        // 编辑
                        this.createCourseForm['unid'] = this.editID
                        if (this.createCourseForm.lession_type == '线下课程') {
                            this.createCourseForm.lession_type = 2
                        } else if (this.createCourseForm.lession_type == '线上课程') {
                            this.createCourseForm.lession_type = 1
                        }
                        addCourse(this.createCourseForm).then(rs => {
                            console.log(this.createCourseForm)
                            if (rs.code == 200) {
                                this.$message.success('编辑课程成功')
                                this.createCourseForm = {}
                                this.fileList = []
                                this.$emit('close')
                                this.$emit('Refresh')
                            } else {
                                this.$message.error('编辑课程失败！')
                            }
                        })
                    } else {
                        // 添加
                        addCourse(this.createCourseForm).then(rs => {
                            if (rs.code == 200) {
                                this.$message.success('新建课程成功')
                                this.createCourseForm = {}
                                this.fileList = []
                                this.$emit('close')
                                this.$emit('Refresh')
                            } else {
                                this.$message.error('新建课程失败！')
                            }
                        })
                    }
                    // this.$emit('close')
                    // this.$emit('Refresh')
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
  .majoryFrom{
    display: flex;
    margin-left: 20px;
  }
  .kechengjianjie {
    margin-left: 36px;
  }

  .el-form-item {
    margin-bottom: 24px;
  }

  .depositImg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 100px;
  }

  .depositImg img {
    width: auto;
    height: auto;
    max-width: 100%;
  }
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
  }
</style>
